'use client'
import '@/pao/web/blockly/markdown/markdownBlocks';
import 'md-editor-rt/lib/style.css';

import { MdEditor } from 'md-editor-rt';
import { useState } from 'react';
import React from 'react';
import { markdownGenerator } from '@/pao/web/blockly/markdown/markdown';
import { createLatexToolbox } from '@/pao/web/blockly/markdown/markdownLatexBlocks';
import { PaoBlocklyControl } from '@/pao/web/blockly/blklBase';
import { css } from '@emotion/css';
import { createMarkdownToolbox } from '@/pao/web/blockly/markdown/markdownBlocks';

export default function Page() {
	const [text, setText] = useState('$x$ hello world!');

	return <div className={css`display: flex; flex-direction: column; flex: auto;`}>
		<MdEditor value={text} onChange={setText} />
		<PaoBlocklyControl className={css`flex: auto;`}
			codeGenerator={markdownGenerator}
			onGenerateCode={code=>{
				setText(code);
			}}
			config={{
				toolbox: {
					// There are two kinds of toolboxes. The simpler one is a flyout toolbox.
					kind: 'categoryToolbox',
					// The contents is the blocks and other items that exist in your toolbox.
					contents: [
						...createMarkdownToolbox(),
						{
							kind: "category",
							name: "公式",
							colour: "#A9A900",
							"contents": [
								...createLatexToolbox()
							]
						}
						// You can add more blocks to this array.
					]
				}
			}
			} />
	</div>;
}